{% extends 'base.html' %}
{% load static %}

{% block title %}工具分享 - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
.tool-card {
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.1);
    border-color: var(--primary-color);
}

.tool-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.tool-type-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    background: var(--primary-color);
    color: var(--bg-color);
}

.tool-stats {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.filter-section {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

.filter-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    margin: 0.25rem;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--bg-color);
}

.search-box {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    padding: 0.75rem 1.5rem;
    color: var(--text-color);
    width: 100%;
}

.search-box:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.1);
}

.sort-select {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    padding: 0.75rem 1.5rem;
    color: var(--text-color);
    width: 100%;
}

.sort-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.1);
    background: var(--card-bg);
    color: var(--text-color);
}

.sort-select option {
    background: var(--card-bg);
    color: var(--text-color);
}
</style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <!-- 页面标题 -->
    <div class="text-center mb-5">
        <h1 class="display-4 mb-3">
            <i class="fas fa-tools text-primary"></i>
            工具分享
        </h1>
        <p class="lead">发现和分享有用的开发工具和在线服务</p>
    </div>

    <!-- 搜索和筛选 -->
    <div class="filter-section">
        <div class="row">
            <div class="col-md-6 mb-3">
                <form method="get" class="d-flex align-items-center">
                    <input type="search" name="search" class="search-box" 
                           placeholder="搜索工具..." value="{{ search_query }}">
                    <button type="submit" class="btn btn-primary ms-2" style="height: 48px; padding: 0.75rem 1rem;">
                        <i class="fas fa-search"></i>
                    </button>
                </form>
            </div>
            <div class="col-md-6 mb-3">
                <select class="sort-select" onchange="filterBySort(this.value)">
                    <option value="-created_at" {% if current_sort == '-created_at' %}selected{% endif %}>最新发布</option>
                    <option value="-views" {% if current_sort == '-views' %}selected{% endif %}>最多浏览</option>
                    <option value="-clicks" {% if current_sort == '-clicks' %}selected{% endif %}>最多点击</option>
                    <option value="-rating" {% if current_sort == '-rating' %}selected{% endif %}>评分最高</option>
                    <option value="name" {% if current_sort == 'name' %}selected{% endif %}>名称排序</option>
                </select>
            </div>
        </div>

        <!-- 分类筛选 -->
        <div class="mb-3">
            <h6>分类筛选：</h6>
            <button class="filter-btn {% if not current_category %}active{% endif %}" 
                    onclick="filterByCategory('')">全部</button>
            {% for category in categories %}
            <button class="filter-btn {% if current_category == category.slug %}active{% endif %}" 
                    onclick="filterByCategory('{{ category.slug }}')">
                <i class="{{ category.icon }}"></i> {{ category.name }}
            </button>
            {% endfor %}
        </div>

        <!-- 类型筛选 -->
        <div class="mb-3">
            <h6>类型筛选：</h6>
            <button class="filter-btn {% if not current_type %}active{% endif %}" 
                    onclick="filterByType('')">全部</button>
            <button class="filter-btn {% if current_type == 'online' %}active{% endif %}" 
                    onclick="filterByType('online')">在线工具</button>
            <button class="filter-btn {% if current_type == 'software' %}active{% endif %}" 
                    onclick="filterByType('software')">软件工具</button>
            <button class="filter-btn {% if current_type == 'library' %}active{% endif %}" 
                    onclick="filterByType('library')">开发库</button>
            <button class="filter-btn {% if current_type == 'service' %}active{% endif %}" 
                    onclick="filterByType('service')">在线服务</button>
            <button class="filter-btn {% if current_type == 'resource' %}active{% endif %}" 
                    onclick="filterByType('resource')">资源站点</button>
        </div>
    </div>

    <div class="row">
        <!-- 工具列表 -->
        <div class="col-lg-9">
            <div class="row">
                {% for tool in page_obj %}
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="tool-card">
                        <div class="card-body text-center d-flex flex-column">
                            <div class="tool-icon">
                                <i class="{{ tool.icon }}"></i>
                            </div>
                            <h5 class="card-title">{{ tool.name }}</h5>
                            <p class="card-text text-muted flex-grow-1">{{ tool.description|truncatechars:80 }}</p>
                            
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <span class="tool-type-badge">{{ tool.get_tool_type_display }}</span>
                                {% if tool.is_free %}
                                <span class="badge bg-success">免费</span>
                                {% else %}
                                <span class="badge bg-warning">付费</span>
                                {% endif %}
                            </div>

                            <div class="tool-stats mb-3">
                                <small>
                                    <i class="fas fa-eye"></i> {{ tool.views }}
                                    <i class="fas fa-mouse-pointer ms-2"></i> {{ tool.clicks }}
                                    <i class="fas fa-star ms-2"></i> {{ tool.rating }}
                                </small>
                            </div>

                            <div class="d-grid gap-2 mt-auto">
                                <a href="{{ tool.get_absolute_url }}" class="btn btn-outline-primary btn-sm">
                                    <i class="fas fa-info-circle"></i> 查看详情
                                </a>
                                <a href="{{ tool.url }}" target="_blank" class="btn btn-primary btn-sm"
                                   onclick="trackClick('{{ tool.slug }}')">
                                    <i class="fas fa-external-link-alt"></i> 访问工具
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="col-12">
                    <div class="text-center py-5">
                        <i class="fas fa-search fa-3x text-muted mb-3"></i>
                        <h4>没有找到相关工具</h4>
                        <p class="text-muted">尝试调整搜索条件或浏览其他分类</p>
                    </div>
                </div>
                {% endfor %}
            </div>

            <!-- 分页 -->
            {% if page_obj.has_other_pages %}
            <nav aria-label="工具分页">
                <ul class="pagination justify-content-center">
                    {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if current_category %}&category={{ current_category }}{% endif %}{% if current_type %}&type={{ current_type }}{% endif %}{% if current_sort %}&sort={{ current_sort }}{% endif %}">
                            <i class="fas fa-chevron-left"></i>
                        </a>
                    </li>
                    {% endif %}

                    {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                    <li class="page-item active">
                        <span class="page-link">{{ num }}</span>
                    </li>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ num }}{% if search_query %}&search={{ search_query }}{% endif %}{% if current_category %}&category={{ current_category }}{% endif %}{% if current_type %}&type={{ current_type }}{% endif %}{% if current_sort %}&sort={{ current_sort }}{% endif %}">{{ num }}</a>
                    </li>
                    {% endif %}
                    {% endfor %}

                    {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if current_category %}&category={{ current_category }}{% endif %}{% if current_type %}&type={{ current_type }}{% endif %}{% if current_sort %}&sort={{ current_sort }}{% endif %}">
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}
        </div>

        <!-- 侧边栏 -->
        <div class="col-lg-3">
            <!-- 推荐工具 -->
            {% if featured_tools %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5><i class="fas fa-star text-warning"></i> 推荐工具</h5>
                </div>
                <div class="card-body">
                    {% for tool in featured_tools %}
                    <div class="d-flex align-items-center mb-3">
                        <div class="me-3">
                            <i class="{{ tool.icon }} text-primary"></i>
                        </div>
                        <div class="flex-grow-1">
                            <h6 class="mb-1">
                                <a href="{{ tool.get_absolute_url }}" class="text-decoration-none">
                                    {{ tool.name }}
                                </a>
                            </h6>
                            <small class="text-muted">{{ tool.description|truncatechars:50 }}</small>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            <!-- 标签云 -->
            {% if tags %}
            <div class="card">
                <div class="card-header">
                    <h5><i class="fas fa-tags"></i> 标签</h5>
                </div>
                <div class="card-body">
                    {% for tag in tags %}
                    <a href="?tag={{ tag.slug }}" class="badge bg-secondary me-1 mb-1 text-decoration-none">
                        {{ tag.name }}
                    </a>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function filterByCategory(category) {
    const url = new URL(window.location);
    if (category) {
        url.searchParams.set('category', category);
    } else {
        url.searchParams.delete('category');
    }
    url.searchParams.delete('page');
    window.location.href = url.toString();
}

function filterByType(type) {
    const url = new URL(window.location);
    if (type) {
        url.searchParams.set('type', type);
    } else {
        url.searchParams.delete('type');
    }
    url.searchParams.delete('page');
    window.location.href = url.toString();
}

function filterBySort(sort) {
    const url = new URL(window.location);
    url.searchParams.set('sort', sort);
    url.searchParams.delete('page');
    window.location.href = url.toString();
}

function trackClick(slug) {
    fetch(`/tools/click/${slug}/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/json',
        },
    });
}
</script>
{% endblock %}